import React from "react";
import "./notification.scss";
import Close from "../icons/close";
import Success from "../icons/success";
import Info from "../icons/info";
import Warning from "../icons/warning";
import Error from "../icons/error";

/**
 * @param title 标题
 * @param message 通知栏正文内容
 * @param dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理
 * @param type 通知的类型
 * @param icon 自定义图标。 若设置了 type，则 icon 会被覆盖
 * @param showClose 是否显示关闭按钮
 * @param onClose 关闭时的回调函数
 */
interface Props {
    title?: string,
    message?: string,
    dangerouslyUseHTMLString?: boolean,
    type?: 'success' | 'warning' | 'info' | 'error' | '',
    icon?: React.ReactNode,
    showClose?: boolean,
    onClose?: () => void
}

const Notification = ({
    title,
    message,
    dangerouslyUseHTMLString = false,
    type,
    icon,
    showClose = true,
    onClose = () => { }
}: Props) => {
    return (
        <>
            <div className="pe-notification-icon">
                {
                    type ? (
                        <>
                            {type === 'success' ? <Success color="var(--pe-color-success)" /> : null}
                            {type === 'info' ? <Info color="var(--pe-color-info)" /> : null}
                            {type === 'warning' ? <Warning color="var(--pe-color-warning)" /> : null}
                            {type === 'error' ? <Error color="var(--pe-color-error)" /> : null}
                        </>
                    ) : (
                        <>{icon}</>
                    )
                }
            </div>
            <div style={{ width: '100%' }}>
                <h2 className="pe-notification-title">
                    {title}
                    {
                        showClose ? (
                            <div className="pe-notification-close" onClick={(e) => {
                                e.stopPropagation()
                                onClose()
                            }}>
                                <Close />
                            </div>
                        ) : null
                    }
                </h2>
                <div className="pe-notification-content">
                    {
                        !dangerouslyUseHTMLString ? (
                            <>{message}</>
                        ) : (
                            <div dangerouslySetInnerHTML={{ __html: message! }}></div>
                        )
                    }
                </div>
            </div>
        </>
    )
}

export default Notification